<template>
  <div>
    <div style="width:100%;background-color: #FFFFFF;padding: 20px;">
      <div style="width: 100%;box-shadow: 0px 2px 9px -4px;display: flex">
        <div style="padding: 25px;">
          <img src="./u71454.png" style="height: 100%">
        </div>
        <div style="display: flex;align-items: center;">
          <a-descriptions>
            <template slot="title">
              <span style="font-size: 23px">{{ topData.realName }}</span>/
              <span style="font-size: 15px" v-if="topData.profileType">类型：{{ this.$filterDictTextByCache('personType', topData.profileType) ? this.$filterDictTextByCache('personType', topData.profileType) : '暂无字典配置'}}</span>
            </template>
            <a-descriptions-item label="风险等级">
              {{ topData.highRiskSituation? topData.highRiskSituation === 1 ? '高' : topData.highRiskSituation === 2 ? '中' : topData.highRiskSituation === 3 ? '低':'无':'无'}}风险
<!--              {{ topData.riskLevel }}-->
            </a-descriptions-item>
            <a-descriptions-item label="人员标签">
              {{ topData.sjskUserTagType }}
              <a-button type="link" icon="edit" @click="tanchuang"/>
            </a-descriptions-item>
            <a-descriptions-item label="执行地">
              {{ topData.householdTown }}
            </a-descriptions-item>
            <a-descriptions-item label="负责专干/社工">
              {{ topData.belongManagerName }}
            </a-descriptions-item>
            <a-descriptions-item label="近一月平均签到率">
              0%
            </a-descriptions-item>
            <a-descriptions-item label="今日签到情况">
              <sapn style="color: red">未签到</sapn>
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </div>
    <div style="width:100%;background-color: #FFFFFF;">
      <a-card :bordered="false">
        <a-tabs  @change="callback" :tabBarGutter="25">
          <a-tab-pane key="1" tab="基本信息" forceRender>
            <basic @basicFun="basicFun" rel="prefetch" ref="basic" ></basic>
          </a-tab-pane>
          <a-tab-pane key="2" tab="预估" v-if="personStageFun(2)" forceRender>
            <estimate rel="prefetch" ref="estimate"></estimate>
          </a-tab-pane>
          <a-tab-pane key="3" tab="计划" v-if="personStageFun(3)" forceRender>
            <plan rel="prefetch" ref="plan"></plan>
          </a-tab-pane>
          <a-tab-pane key="4" tab="介入" v-if="personStageFun(4)" forceRender>
            <intervene rel="prefetch" ref="intervene"></intervene>
          </a-tab-pane>
          <a-tab-pane key="5" tab="阶段性评估" v-if="personStageFun(5)" forceRender>
            <stageEvaluation rel="prefetch" ref="stageEvaluation"></stageEvaluation>
          </a-tab-pane>
          <a-tab-pane key="6" tab="结案评估" v-if="personStageFun(6)" forceRender>
            <caseConclusionEvaluation rel="prefetch" ref="caseConclusionEvaluation"></caseConclusionEvaluation>
          </a-tab-pane>
          <a-tab-pane key="7" tab="结案" v-if="personStageFun(7)" forceRender>
            <caseConclusion rel="prefetch" ref="caseConclusion"></caseConclusion>
          </a-tab-pane>
          <a-tab-pane key="8" tab="回访" v-if="personStageFun(8)" forceRender>
            <payAReturnVisit rel="prefetch" ref="payAReturnVisit"></payAReturnVisit>
          </a-tab-pane>
          <a-tab-pane key="9" tab="个人活动中心" v-if="personStageFun(9)" forceRender>
            <trail rel="prefetch" ref="trail"></trail>
          </a-tab-pane>
          <a-tab-pane key="10" tab="告警中心" v-if="personStageFun(10)" forceRender>
            <giveAnAlarm rel="prefetch" ref="giveAnAlarm"></giveAnAlarm>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </div>
    <tanchuan ref="tanchuan" :profileType="profileType"></tanchuan>
  </div>

</template>

<script>
import basic from "@views/sjsk/holographicArchives/modules/basic";
import estimate from "@views/sjsk/holographicArchives/modules/estimate"
import plan from '@views/sjsk/holographicArchives/modules/plan'
import intervene from '@views/sjsk/holographicArchives/modules/intervene'
import stageEvaluation from '@views/sjsk/holographicArchives/modules/stageEvaluation'
import caseConclusionEvaluation from '@views/sjsk/holographicArchives/modules/caseConclusionEvaluation'
import caseConclusion from '@views/sjsk/holographicArchives/modules/caseConclusion'
import payAReturnVisit from '@views/sjsk/holographicArchives/modules/payAReturnVisit'
import trail from '@views/sjsk/holographicArchives/modules/trail'
import giveAnAlarm from '@views/sjsk/holographicArchives/modules/giveAnAlarm'
import {getSlskProfile} from "@api/sjsk/archives";
import {mapState} from "vuex";
import tanchuan from "@views/sjsk/holographicArchives/tanchuan";

export default {
  name: "index",
  components: {
    basic,
    estimate,
    plan,
    intervene,
    stageEvaluation,
    caseConclusionEvaluation,
    caseConclusion,
    payAReturnVisit,
    trail,
    giveAnAlarm,
    tanchuan
  },
  data() {
    return {
      profileType:this.$route.query.profileType,
      topData:{}
    }
  },
  computed:{
    routeObjData(){
      return this.$store.state.holographicArchives.routeObjData
    }
  },
  created() {
    this.refreshTable()
  },
  methods: {
    tanchuang(){
      this.$refs.tanchuan.show()
    },
    basicFun(val){
      console.log('中专终点')
      this.topData = val
      console.log(val)
    },
    callback(key) {
      switch (key) {
        case '1':
          this.$refs.basic.refreshTable()

          break
        case '2':
          this.$refs.estimate.refreshTable()

          break
        case '3':
          this.$refs.plan.refreshTable()

          break
        case '4':
          this.$refs.intervene.refreshTable()

          break
        case '5':
          this.$refs.stageEvaluation.refreshTable()

          break
        case '6':
          this.$refs.caseConclusionEvaluation.refreshTable()

          break
        case '7':
          this.$refs.caseConclusion.refreshTable()

          break
        case '8':
          this.$refs.payAReturnVisit.refreshTable()

          break
        case '9':
          this.$refs.trail.refreshTable()

          break
        case '10':
          this.$refs.giveAnAlarm.refreshTable()

          break
      }
    },
    refreshTable(){
      this.$store.dispatch('routeObjDataFun',this.$route.query)
      getSlskProfile(this.$route.params.sjskId).then(ser => {
        if(ser.success){
          this.topData = Object.assign(this.topData,ser.result)
          this.$store.dispatch('holographicArchivesFun',this.topData)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    personStageFun(val){
      // return this.$store.state.routeObjData === val
      // console.log(this.$store.state)
      // console.log(this.routeObjData)
      if(this.routeObjData){
        if(this.routeObjData.personStage === 1 || this.routeObjData.personStage === '1'){
          // console.log('监所')+
          return val === 4;
        }
        if(this.routeObjData.personStage === 2 || this.routeObjData.personStage === '2'){
          // console.log('个案')
          return true
        }
        if(this.routeObjData.personStage === 3 || this.routeObjData.personStage === '3'){
          // console.log('社会面')
          return !(val === 8 || val === 9 || val === 10);
        }
      } else {
        console.log('请检查VUEX数据')
        return true
      }
    }
  },
  watch:{
    $route(data) {   //data为当前路由信息
      console.log(data.query)
      this.$store.dispatch('routeObjDataFun',data.query)
    }
  }
}
</script>

<style scoped>

</style>